<template>
  <div class="fin_user_roster">
    <div class="select">
      <el-form :inline="true">
        <el-form-item>
          <ToolBar :show-all="false"  :update-data="updateById" :delete-data="deleteById" :show-add="false"  :delete-disable="multipleSelection.length<=0" :update-disable="multipleSelection.length!==1"></ToolBar>
        </el-form-item>
        <el-form-item label="员工姓名：">
          <el-select v-model="form.name" placeholder="请选择员工姓名..."  value-key="id" @change="handleCurrentChange(1)" filterable clearable size="small">
            <el-option :label="item.userName+'（'+item.jobNo+'）'" :value="item.userName" v-for="item in $store.state.userList" >
              <span style="float: left">{{ item.userName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.jobNo }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="离职日期：">
          <el-date-picker v-model="attendanceDate" size="small"
                          type="daterange"
                          align="right"
                          unlink-panels
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          :clearable="false"

                          >

          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="handleCurrentChange(1)">筛选</el-button>
          <el-button size="small" type="primary" @click="reSet"
                     icon="el-icon-search">重置
          </el-button>
          <el-button size="small" type="primary" @click="get"
                     icon="el-icon-search">重新拉取
          </el-button>
        </el-form-item>

      </el-form>

      <el-dialog title="打卡数据搜索" :visible.sync="dialogFormVisible" center>
        <el-row>
          <el-form :model="form">
            <el-col :span="12">
              <el-form-item label="入职时间" :label-width="formLabelWidth">
                <el-date-picker
                    class="w100"
                    v-model="form.hiredDate"
                    align="right"
                    type="date"
                    placeholder="选择日期"
                    :picker-options="pickerOptions">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="档案时间" :label-width="formLabelWidth">
                <el-date-picker
                    class="w100"
                    v-model="form.archivesDate"
                    align="right"
                    type="date"
                    placeholder="选择日期"
                    :picker-options="pickerOptions">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="员工姓名" :label-width="formLabelWidth">
                <el-select v-model="form.name" placeholder="请选择员工姓名..."  value-key="id" @change="handleUserChange" filterable clearable  class="w100">
                  <el-option :label="item.name" :value="item.name" v-for="item in dingUsersList" :key="item.id">
                    <span style="float: left">{{ item.name }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.jobNumber }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="考勤结果" :label-width="formLabelWidth">
                <el-select v-model="form.timeResult" placeholder="请选择考勤结果..."  value-key="id" filterable clearable class="w100">
                  <el-option :label="item.label" :value="item.value" v-for="item in timeResultList" :key="item.id">
                    <span style="float: left">{{ item.label }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value}}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="getDataList">确 定</el-button>
        </div>
      </el-dialog>


    </div>
    <el-table
        :data="tableData"
        stripe
        border
        default-expand-all
        @selection-change="handleSelectionChange"
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}">
      <el-table-column type="selection" width="50" label="序号">
      </el-table-column>
      <el-table-column label="员工姓名" prop="userName">
      </el-table-column>
      <el-table-column label="员工工号" prop="jobNo">
      </el-table-column>
      <el-table-column label="所在部门" prop="deptLevel2" min-width="120">
        <template slot-scope="scope">
          {{scope.row.deptLevel1}}-{{scope.row.deptLevel2}}-{{scope.row.deptLevel3}}
        </template>
      </el-table-column>
      <el-table-column label="入职日期" prop="joinedDate">
        <template slot-scope="scope">
          {{scope.row.joinedDate|formatDateBirth}}
        </template>
      </el-table-column>
      <el-table-column label="离职日期" prop="workDate">
        <template slot-scope="scope"  v-if="scope.row.leaveDate">
          {{ scope.row.leaveDate|formatDateBirth }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间">
        <template slot-scope="scope">
          {{ scope.row.createTime|formatDate }}
        </template>
      </el-table-column>
      <el-table-column label="人力属性" prop="natureManpower">
      </el-table-column>
      <el-table-column label="原因" prop="summary" show-overflow-tooltip>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
          hide-on-single-page
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size=size
          layout="total, sizes, prev, pager, next, jumper"
          :total=total>
      </el-pagination>
    </div>
  </div>
</template>

<script>
import ToolBar from "@/components/common/ToolBar";
import moment from "moment";

export default {
  name: "FinQuit",
  components: {ToolBar},
  data() {
    return {
      currentPage: 1,
      total: 0,
      size: 10,
      tableData: [],
      dingUsersListName: null,
      dingUsersList: [],
      userList:[],
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          },
          {
            text: '一个月前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', date);
            }
          }]
      },
      dialogFormVisible: false,
      form: {
        start:null,
        end:null,
        userId:null,
        userName:null,
        workDate:null,
        timeResult:null,
        checkType:null,
        archivesDate:new Date(),
        dateEntry:null
      },
      formLabelWidth: '120px',
      timeResultList:[
        {
          label:"正常",
          value:"Normal",
        },
        {
          label:"早退",
          value:"Early",
        },    {
          label:"迟到",
          value:"Late",
        },    {
          label:"严重迟到",
          value:"SeriousLate",
        },    {
          label:"旷工迟到",
          value:"Absenteeism",
        },    {
          label:"未打卡",
          value:"NotSigned",
        },
      ],
      multipleSelection:[],
      attendanceDate:[]
    }
  },
  created() {
    this.attendanceDate = [moment().add("months",-1).format("YYYY-MM-DD"),moment().format("YYYY-MM-DD")]
    this.getDataList()

  },
  mounted() {

  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.$tools.showMessageBox("确认删除"+row.name+"("+row.jobNumber+")？","操作确认",'warning').then(confirm=>{
        axios.delete("/ding_users/delete/"+row.id).then(res=>{
          if(res.data.success){
            this.$tools.showMessage("用户"+row.name+"("+row.jobNumber+"删除成功！","success")
          }
        })

      }).catch(cancel=>{
        this.$tools.showMessage("操作已取消！","info")

      })
    },
    getDataList() {
      this.dialogFormVisible=false
      this.form.start=this.attendanceDate[0]
      this.form.end=this.attendanceDate[1]
      console.log("查询数据：",this.form)
      axios.post("/fin_quit/list/" + this.currentPage + "/" + this.size,this.form).then(res => {
        console.log("打卡信息：", res)
        if (res.data.success) {
          this.tableData = res.data.data.records
          this.total = res.data.data.total
          this.pages = res.data.data.pages
        }else{
          this.tableData=[]
          this.total=0
          this.pages=1
        }

      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val
      this.getDataList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val
      this.getDataList()
    },
    goSearch(){
      this.dialogFormVisible=true

    },
    reSet(){
      this.form= {
        start:null,
        end:null,
        userId:null,
        name:null,
        workDate:null,
        timeResult:null,
        checkType:null,
      }
      this.getDataList()

    },
    handleChange() {
      this.getDataList()
    },
    handleUserChange(){
      // this.form.userId=
      console.log('Form:',this.form)
    },
    deleteById(){
      console.log("用户扫描删除")
      this.$tools.showMessageBox("确认删除"+this.multipleSelection.length+"名用户？","批量删除确认","warning").then(confirm=>{
        axios.post("/productInfo/deleteBatch",this.multipleSelection).then(res=>{
          console.log("批量删除结果：",res)
          if(res.data.success){
            this.$tools.showMessage("删除成功！","success")
            this.getDataList()
          }else{
            this.$tools.showMessage("删除失败！","danger")
          }
        })
      }).catch(cancel=>{
        this.$tools.showMessage("操作已取消！","info")
      })

    },
    updateById(){
      console.log("用户扫描修改")
    },
    get(){
      axios.get('/fin_quit/getFromDingDing').then(res=>{
        // console.log("YES")
        if(res.data.success){
          this.$tools.showMessage("获取成功","success")
        }
      })
    }
  }

}
</script>

<style scoped lang="less">
.fin_user_roster {
  .select {
    display: inline-flex !important;
  }
}

</style>
